<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        .a{
            border: 1px solid blue;
        }
        .b{
            padding: 15px;
        }
    </style>
</head>
<body>

<div id="a" style="padding: 20px">
<!--    href 是动态的值-->
    <h3>设置单值属性</h3>
    <a v-bind:href="url">{{url}}</a>

    <h3>设置数组语法</h3>
    <a v-bind:href="url"
       v-bind:class="['a' , 'b']"
    >{{url}}</a>

    <h3>设置对象语法</h3>
    <a v-bind:href="url"
    v-bind:class="{a:aFlag , b:bFlag}"
    >{{url}}</a>
<!--    语法糖 v-bind => :-->
    <a v-bind:href="url"
       :style="{color : 'green' , fontSize : fsize}"
    >{{url}}</a>

    <h3>设置函数语法</h3>
    <a v-bind:href="url"
    :style="mystyle()"
    >{{url}}</a>
    <a v-bind:href="url"
    :style="mystyle1()"
    >{{url}}</a>
    <a v-bind:href="url"
       :style="mystyle2()"
    >{{url}}</a>
</div>

<script>
    var vue = new Vue({
        el : "#a",
        data : {
            url : "index,html",
            aFlag : true,
            bFlag : false,
            fsize : "2em"
        },
        method : {
            // 非箭头函数
            mystyle : function (){
                return {color : 'red',fontSize:this.fsize};
            },
            // 箭头函数在 method方法中不能使用 this
            mystyle1 : ()=>{
                console.info(this);
                return {color : 'blue',fontSize: '1.5em'};
            },
            // 直接定义
             mystyle2(){
                return {color : 'yellow' , fontSize: this.fsize};
             },
        }
    });
</script>
</body>
</html>